<template>
  <transition name="el-fade-in">
    <div v-if="flag">
      <!-- 内容 -->
      <div class="lse_iframe_body">
          <el-card class="box-card" style="height:100%" :body-style="{height: 'calc(100% - 60px)',padding:'0',overflow: 'auto'}">
            <div slot="header" style="text-align:center" >
                <el-button style="float:left;padding:0;color:#606266;font-size:20px" type="text" icon="el-icon-back" @click="close"></el-button>
                <el-input
                    readonly
                  v-model="url" size="mini"
                  style="display: inline-block;width: calc(100% - 100px);overflow: hidden;margin-left:-20px;margin-top:-5px">
                </el-input>
            </div>
            <!-- 内容 -->
            <div>
              <iframe id="iframe" :src="url" :style="style" style="background: white" frameborder="0"></iframe>
            </div>
        </el-card>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'alert',
  data () {
    return {
      flag: false,
      title: 'LSE API IFRAME',
      url: '',
      style: {}
    }
  },
  methods: {
    close () {
      this.flag = false
    }

  },
  created () {
    let height = document.body.clientHeight
    this.style = {
      width: '100%',
      height: height - 80 + 'px'
    }
  }
}
</script>

<style scoped>
.lse_iframe_body{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    overflow: auto;
    background: white;
    z-index: 100000;
}
</style>
